<template>
  <div ref="main" style="width: 100%;height: 100%;margin: 0 auto;  background-color: #FFFFFF;" ></div>
</template>

<script>
  export default{
    props:{
      chartsData:Object
    },
    data(){
      return{
        data:{},
        // 展示数据
        showData:[],
        // links
        links:[]
      }
    },
    watch:{
      chartsData:function(newVlaue){
        // 新数据
        this.data = newVlaue
        // console.log(this.data)
        // 处理数据
        this.detailData(newVlaue);
        this.initCahrt()
        
        // 这里将link数据传给父组件
        this.$emit("relationList",this.links)
      },
      deeep:true
    },
    mounted() {
      this.initCahrt()
    },
    methods:{
      detailData(data){
        this.showData = []
        this.links = []
        // 实体1
        var obj = {
          name: data.entity1,
          draggable: true,
          itemStyle: {
              normal: {
                  color: "#E6A23C",
              }
          }
        }
        this.showData.push(obj)

        if(data.to != null){
          this.getInfo(data.to,data.entity1)
        }
        // console.log(this.showData)
        // console.log(this.links)
      },
      // 数据递归
      getInfo(ToData,target){
        // 遍历
        ToData.map(val => {
          // 判断showData里面是否已经存在 该实体 存在就不能插入
          var n = 0
          this.showData.map(value => {
            if(val.entity === value.name){
              // 存在相同的实体 令n = 1
              n = 1
            }
          })

          // 只有不同名才插入
          if(n === 0){
            // data
            var obj1 = {
              name: '',
              draggable: true,
              itemStyle: {
                  normal: {
                      color: "#5793f3",
                  }
              }
            }
            obj1.name = val.entity
            this.showData.push(obj1)
          }

          // 插入关系链接
          // link
           var link = {
             source: '',
             target: target,
             value: ''
           }
           link.source = val.entity
           link.value = val.relation
           this.links.push(link)

           // 判断是否还有下一级
           if(val.to != null){
             return this.getInfo(val.to,val.entity)
           }
           return 0
        })
        return 0
      },


      initCahrt(){
       let myChart = this.$echarts.init(this.$refs.main);
       var colors = ["#5793f3", "#d14a61", "#675bba"];
       let option = {
           title: {
               text: ''
           },
           tooltip: {},
           animationDurationUpdate: 1500,
           animationEasingUpdate: 'quinticInOut',
           label: {
               normal: {
                   show: true,
                   textStyle: {
                       fontSize: 12
                   },
               }
           },
           series: [

               {
                   type: 'graph',
                   layout: 'force',
                   symbolSize: 45,

                   // 鼠标聚焦只展示时相关联的
                   focusNodeAdjacency: true,

                   // 加箭头
                   edgeSymbol:['arrow'],
                   // 箭头大小
                   edgeSymbolSize:10,

                   roam: true,
                   label: {
                       normal: {
                           show: true,
                           textStyle: {
                               fontSize: 12
                           },
                       }
                   },
                   force: {
                       repulsion: 1000
                   },
                   edgeLabel: {
                       normal: {
                           show: true,
                           textStyle: {
                               fontSize: 10
                           },
                           formatter: "{c}"
                       }
                   },
                   data: this.showData,
                   links: this.links,
                   lineStyle: {
                       normal: {
                           opacity: 0.9,
                           width: 1,
                           curveness: 0
                       }
                   }
               }
           ]
       };
       myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
